
<template>
  <div class="login-user">
    <el-form ref="loginForm"
             :model="form"
             :rules="rules"
             :label-position="labelPosition"
             label-width="80px"
             class="login-box">
      <div class="login-title">
        <h2>欢迎登录</h2>
        <p>请输入账号密码</p>
      </div>

      <el-form-item prop="userid">
        <el-input placeholder="请输入账号"
                  type="text"
                  prefix-icon="el-icon-user"
                  v-model="form.userid">
        </el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input type="password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-search"
                  v-model="form.pwd" />
      </el-form-item>
      <el-form-item>

        <el-button type="primary"
                   v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <div class="login-user-footer">

      <p>© 2019 <a href="https://www.xhcss.com/"
           target="_blank">xhcss.com 版权所有</a></p>
      <p>
        <span><a href="https://www.xhcss.com"
             target="_blank">前往官网</a></span>
      </p>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { login } from '../axios/api'
export default {
  name: 'Login',
  data () {
    return {
      labelPosition: 'top',
      form: {
        userid: '',
        pwd: '',
        dopost: 'login'
      },
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        userid: [
          { required: true, message: '账号不可为空', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '密码不可为空', trigger: 'blur' }
        ]
      },

      // 对话框显示和隐藏
      dialogVisible: false
    }
  },
  methods: {
    ...mapMutations({
      bindLogin: 'BIND_LOGIN',
      saveUser: 'SAVE_USER'
    }),
    onSubmit (formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var data = this.$refs[formName].model
          login(data).then(res => {
            if (res.data.state === 1) {
              this.$notify({
                title: '登录成功',
                message: '正在为您跳转首页',
                type: 'success',
                duration: 2000
              })
              this.bindLogin(this.form.userid)
              this.saveUser(this.form.userid)
              setTimeout(() => {
                this.$router.push({
                  path: '/'
                })
              }, 500)
            } else {
              this.$message.error(res.data.msg)
              return false
            }
          })
          return false
        } else {
          this.$message.error('账号密码不能为空')
          return false
        }
      })
    }
  },
  mounted () {
    console.log(this)
  }
}
</script>

<style lang="less" scoped>
.login-user {
  padding: 110px 0;
  min-height: 100%;
  background-color: #f2f2f2;
  color: #666;
}
.login-box {
  width: 350px;
  max-width: 100%;
  margin: 0px auto;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.el-form-item {
  margin-bottom: 30px;
  .el-form-item__error {
    padding: 10px 0;
  }
}
.login-btn {
}
.el-button {
  width: 100%;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
  h2 {
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 10px;
  }
  p {
    font-weight: 300;
  }
}
.login-user-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 30px;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.5);
  a {
    padding: 0 5px;
    color: rgba(0, 0, 0, 0.5);
  }
}
</style>
